<template>
  <div class='dashboard'>
    <!-- 左侧栏 -->
    <div class="left-column">
      <DeptSelect @changeDept="changeDept"></DeptSelect>
      <div class="left-box">
        <div class="left-box-header flex flex-jcenter paddinglr-15">
          <div class="title">
            {{ leftTitle }}
          </div>
          <div class="details point" @click="goDetails()">
            详情<i class="iconfontShuzhi icon-jiantou-you"></i>
          </div>
        </div>
        <div class="left-box-content flex flex-column flex-space-between overflow-auto both-100">
          <p class="address padding-5">地址:龙岩市新罗区龙岩大道288号</p>
          <div class="content left-box1 hide-scrollbar paddinglr-15 border-box">
            <LeftBox1 ref="refBox1"></LeftBox1>
          </div>
          <div class="content left-box2 hide-scrollbar padding-15 border-box">
            <LeftBox2 ref="refBox2"></LeftBox2>
          </div>
          <div class="content left-box3 hide-scrollbar paddinglr-15 border-box">
            <LeftBox3 ref="refBox3"></LeftBox3>
          </div>
          <div class="content left-box4 hide-scrollbar paddinglr-15 border-box">
            <LeftBox4 ref="refBox4"></LeftBox4>
          </div>
        </div>
        <div class="left-box-footer">
        </div>
      </div>
    </div>

    <!-- 中间栏 -->
    <div class="middle-column flex flex-column">
      <div class="mian-title-box marginb-15">
        <CustomTitle title="安全设备运行情况" :showLogo="false" prefixClass="">
          <template #prefixClass>
            <div class="prefix-before"></div>
          </template>
        </CustomTitle>
      </div>
      <div class="middle-content flex flex-1 flex-column padding-15 flex-jcenter">
        <MiddleTitle ref="middleTitle"></MiddleTitle>
        <div class="map flex flex-1 both-100">
          <transition name="tab" mode="out-in">
            <component :is="middleComponent" ref="comp" width="100%" height="100%" :mapData="mapOptions" @onClick="mapOnClick"></component>
          </transition>
        </div>
        <div class="searchImg">
          <el-select size="small" placeholder="切换 2.5D 图片" v-model="middleCompValue" @change="changeImg">
            <el-option v-for="option in projectPointPicList" :key="option.value" :value="option.value" :label="option.label"></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <!-- 右侧栏 -->
    <div class="right-column flex-column flex-space-between overflow-auto both-100 hide-scrollbar">
      <DashboardCard title="风险等级" height="26%">
        <template #content>
          <div class="content risk-level-content hide-scrollbar">
            <RiskLevel></RiskLevel>
          </div>
        </template>
      </DashboardCard>
      <DashboardCard title="安全基础信息" height="calc(35% - 15px)">
        <template #content>
          <div class="content basic-information-content hide-scrollbar">
            <BasicInformation></BasicInformation>
          </div>
        </template>
      </DashboardCard>
      <DashboardCard title="主要风险点" height="calc(35% - 15px)">
        <template #content>
          <div class="content main-point-content flex-acenter">
            <RiskPointList ref="riskPointList"></RiskPointList>
          </div>
        </template>
      </DashboardCard>
    </div>
    <ProjectDialog ref="projectDialog"></ProjectDialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getProjectPointList } from './api'
import { getProjectPointPicList } from '@/api'
import DashboardCard from '@/components/Dashboard/Card'
import RiskLevel from './components/RiskLevel'
import BasicInformation from './components/BasicInformation'
import RiskPointList from './components/RiskPointList'
import LeftBox1 from './components/LeftBox1'
import LeftBox2 from './components/LeftBox2'
import LeftBox3 from './components/LeftBox3'
import LeftBox4 from './components/LeftBox4'
import MiddleTitle from './components/MidlleTitle'
import LongyanMap from '@/components/map/longyan.vue'
import DeptSelect from '@/components/Dashboard/DeptSelect'
import ProjectDialog from '@/views/system/project/ProjectDialog'
import ProjectImg from './components/ProjectImg'
export default {
  components: {
    DashboardCard,
    RiskLevel,
    BasicInformation,
    RiskPointList,
    LeftBox1,
    LeftBox2,
    LeftBox3,
    LeftBox4,
    MiddleTitle,
    LongyanMap,
    DeptSelect,
    ProjectDialog,
    ProjectImg
  },
  data () {
    return {
      //pointName
      leftTitle: '项目点名称',
      middleComponent: '',
      // 地图数据
      mapOptions: [],
      // 中间组件
      middleComponent: 'LongyanMap',
      // 项目点图片
      projectPointPicList: [],
      // 中间地图类型
      middleCompValue: '',
      // 当前部门Id
      deptId: ''
    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {},
  methods: {
    // 点击详情方法
    mapOnClick (item) {
      console.log(item)
      if (!item) {
        return
      }
      this.$nextTick(() => {
        this.$refs.projectDialog.show(item.projectPointId, item.projectPointName)
      })
    },
    /**
     * 根据部门ID更改数据
     * @param {string} deptId 部门ID
     * @returns {void} 如果deptID为空，则不执行任何操作
     */
    async changeDept (deptId, pointId) {
      if (!deptId) {
        return
      }
      this.middleComponent = 'LongyanMap'
      this.middleCompValue = 'map'
      this.deptId = deptId
      this.initProjectPointImgList(pointId)
      const mapResp = await getProjectPointList({
        deptId
      })
      if (mapResp) {
        this.initMapPoint(mapResp)
        // return
      }
      // 组件列表
      const impleMentList = ['refBox1', 'refBox2', 'refBox3', 'refBox4', 'middleTitle', 'riskPointList']
      impleMentList.forEach(item => {
        try {
          if (this.$refs[item] && typeof this.$refs[item].getData === 'function') {
            this.$refs[item].getData(deptId)
          }
        } catch (error) {
          console.error(error)
        }
      })
    },
    // 初始化地图点位
    initMapPoint (data) {
      this.mapOptions = data.map(item => {
        return {
          name: item.projectPointName,
          value: item.sort,
          projectPointId: item.projectPointId,
          projectPointName: item.projectPointName,
          img: require(`@/assets/images/legend/xiangmudian.png`),
          longitude: item.lng,
          latitude: item.lat,
        }
      })
    },
    // 获取平面图
    initProjectPointImgList (data) {
      const params = {
        projectPointId: data,
        picType: 1
      }
      const mapArr = {
        label: '2.5D图',
        value: 'map',
        type: 'map'
      }
      getProjectPointPicList(params).then(res => {
        const option = res.rows.map(item => {
          return {
            label: item.picName,
            value: item.projectPointPicId,
            img: item.picUrl,
            type: 'img'
          }
        })
        const mergedOption = [mapArr, ...option]
        this.$set(this, 'projectPointPicList', mergedOption)
      })
    },
    // 切换图片
    changeImg (val) {
      if (val !== 'map') {
        this.middleComponent = 'ProjectImg'
        this.$nextTick(() => {
          try {
            setTimeout(() => {
              if (this.$refs['comp'] && typeof this.$refs['comp'].show === 'function') {
                this.$refs['comp'].show(this.deptId,val)
              } else {
                console.warn('Component or its show method is not available yet.');
              }
            }, 1000)
          } catch (error) {
            console.log(error)
          }
        })
      } else {
        this.middleComponent = 'LongyanMap'
      }
    }
  },
  created () {
  },
  mounted () {

  },
}
</script>

<style lang='less' scoped>
.dashboard {
  display: grid;
  grid-template-columns: 440px auto 440px;
  grid-gap: 10px;
  height: 100vh;
  .left-column,
  .middle-column,
  .right-column {
    overflow: auto;
    height: calc(100vh - 140px);
    // border: 1px solid #ccc;
  }

  .left-column {
    grid-column-start: 1;
    grid-column-end: 2;
    .left-box {
      height: 100%;
      position: relative;
      .left-box-header {
        height: 40px;
        background: url("@/assets/images/dashboard/db_center_header.png")
          no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .title {
          font-family: "YOUSHEBIAOTIHEI-2";
          font-weight: 400;
          font-size: 24px;
        }
        .details {
          position: absolute;
          right: 20px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
          i {
            font-size: 12px;
          }
          &:hover {
            color: @primary;
          }
        }
      }
      .left-box-content {
        height: calc(100% - 60px);
        background: url("@/assets/images/dashboard/db_content.png") no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        .address {
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #8fabbf;
        }
        .left-box1 {
          height: 25%;
          overflow: auto;
        }
        .left-box2 {
          height: 35%;
          overflow: auto;
        }
        .left-box3 {
          height: 15%;
          overflow: auto;
        }
        .left-box4 {
          height: 35%;
          overflow: auto;
        }
      }
      .left-box-footer {
        background: url("@/assets/images/dashboard/db_footer.png") no-repeat;
        height: 20px;
      }
    }
  }

  .middle-column {
    grid-column-start: 2;
    grid-column-end: 3;
    .mian-title-box {
      height: 24px;
      .prefix-before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        // background: @primary;
        border-left: 3px solid @primary;
        border-bottom: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid transparent;
      }
    }
    .middle-content {
      // background-image: url("@/assets/images/dashboard/map.png");
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      // cursor: pointer;
      position: relative;
      .searchImg {
        position: absolute;
        bottom: 0;
        overflow: hidden;
      }
    }
  }

  .right-column {
    grid-column-start: 3;
    grid-column-end: 4;
    box-sizing: border-box;
    .content {
      width: 100%;
      height: 100%;
    }
    .risk-level-content {
      overflow: auto;
    }
    .basic-information-content {
      overflow: auto;
    }
    .main-point-content {
    }
  }
}

.db-card-box {
  margin-top: 15px;
}
.db-card-box:first-child {
  margin-top: 0;
}
</style>